<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"
    isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="s" uri="http://stripes.sourceforge.net/stripes.tld" %>

<c:set var="contextPath" value="${pageContext.request.contextPath}" scope="page" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- online jQuery
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
        -->

        <!-- complete jQuery with UI and plugins -->
        
        <script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.core.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.dragable.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.dropable.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.sortable.js" type="text/javascript"></script>
        <script src="js/jquery/jquery-ui-1.7.dialog.js" type="text/javascript"></script>
        

        <!-- jQuery UI css -->
        <link href="css/jquery/jquery-ui-1.7.1.custom.css"
            media="all" rel="stylesheet" type="text/css" />

        <!-- dropdown styles -->
        <link href="css/dropdown/dropdown-func.css"
            media="all" rel="stylesheet" type="text/css" />
        <link href="css/dropdown/look-n-feel.css"
            media="all" rel="stylesheet" type="text/css" />
        
        <!-- dropdown style for editable menu -->
        <link href="css/dropdown-func-override.css" media="all" rel="stylesheet" type="text/css" />


        
        <!--[if lt IE 7]>
        <script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/jquery.dropdown.js" type="text/javascript" ></script>
        <![endif]-->

        <style>
            li.not-sortable {

            }

            ul.sorted-list {
                
            }

            ul.sorted-list li {
            }

            #debug {
                max-height: 50px;
            }

            ul.highlight {
                border: 2px #f00 solid;
                
            }

            .placeholder {
                border: 2px gray dashed;
            }

            #tmp_list {
                margin-left: 60px;
            }
        </style>

        <script type="text/javascript">
            var dirItemClass = "dir";
            var ignoredItemsClass = "not-sortable";
            var tmpUlId = "tmp_list";

            var notSortableBeginListItem = "<li class='" + ignoredItemsClass
                + "'>Place for new item</li>";
            var notSortableEndListItem = "<li class='" + ignoredItemsClass
                + "'>Sample end item</li>";
            var notSortableTmpListItem = "<li class='" + ignoredItemsClass
                + "'>Temporary item</li>";

            jQuery(function() {

                // set up debug window
                jQuery("#debug")
                    .dialog({
                        autoOpen: false,
                        position: ['left','bottom'],
                        width: 850,
                        heigth: 250,
                        maxHeight: 250
                    });
                
                // set up messages window
                jQuery("#messages")
                    .dialog({
                        autoOpen: true,
                        position: ['right','top'],
                        width: 250,
                        heigth: 150
                    });

                
                // append empty lists to all li items, if the have none
                jQuery("#menu ul li").each(function(){
                    var item = jQuery(this);
                    if(item.children("ul").size() == 0){
                        // list item has no children, append ul
                        // with default content
                        item.append("<ul>"
                            + notSortableBeginListItem +"</ul>");

                        var newList = item.children("ul");
                    }
                });

                /*
                // create tmp list for storing items
                jQuery("#menu").append("<ul id='" + tmpUlId
                    + "' class='horizontal'>"
                    + notSortableTmpListItem + "<ul>");
                */

                
                // make all lists sortable
                jQuery("#menu ul").each(function(){
                    jQuery(this)
                        .sortable({
                            cancel: "." + ignoredItemsClass,
                            cursorAt: 'top',
                            dropOnEmpty: false,
                            //placeholder: 'placeholder',
                            helper: 'clone',
                            forcePlaceholderSize: 'true',
                            connectWith: '#menu ul',
                            cursor: 'crosshair',
                            //tolerance: 'pointer',
                            scroll: false,

                            //revert: true // smooth landing animation

                            
                            start: function(event, ui) {
                                jQuery("#menu ul li:not(#" + ui.item.attr("id") + ")")
                                        .filter("#" + ignoredItemsClass)
                                        .each(function(){ // ignore dragged item
                                        
                                    var item = jQuery(this);

                                    item.addClass(dirItemClass);
                                });

                                // assign class for all involved lists
                                jQuery("#menu ul").each(function(){
                                    jQuery(this).addClass("sorted-list");
                                });

                                
                            },

                            // mouse is released
                            stop: function(event, ui) {
                                jQuery("#menu ul").each(function(){
                                    jQuery(this).removeClass("sorted-list");
                                });

                                jQuery("#menu ul").each(function(){
                                    if(jQuery(this).children("li:not("
                                            + ignoredItemsClass + ")").size() == 0){
                                        jQuery(this).removeClass(dirItemClass);
                                    }
                                });

                                // remove displayed count
                                jQuery("span.children-count")
                                    .each(function(){
                                        jQuery(this).remove();
                                });

                                
                            },

                            // DOM changed, but item is still dragged
                            change: function(event, ui) {
                                //var ul = ui.sender.get(0);
                                var movedItemId = ui.item.get(0).id;

                                ui.placeholder.parent().addClass("highlight");

                                showMessage(movedItemId + " moving");
                            },

                            // cursor with item is moved to some new list
                            over: function(event, ui) {
                                /*
                                if(false){
                                    debug("in original list");

                                    var movedItemId = ui.item.get(0).id;

                                    var siblings = jQuery("#" + movedItemId)
                                        .siblings("li");

                                    var children = siblings.children("ul");

                                    debug(children[0]);
                                    debug(children[1]);
                                    debug(children[2]);

                                    siblings.each(function(){
                                        //jQuery(this).addClass("hover");
                                        //jQuery('> .dir',this).addClass("open");
                                        //jQuery('ul:first',this).css('visibility', 'visible');
                                    });
                                }



                                var movedItem = ui.item;
                                var placeholder = ui.placeholder;
                                var sender = ui.sender;
                                var originalList = movedItem.parent();

                                if(ui.sender.parent().attr("id") ==
                                    ui.placeholder.parent().parent().attr("id")){
                                    // moving inside the same list
                                    showMessage("inside original");
                                    originalList.children("li").children("ul")
                                        .hover(function() {
                                          $(this).addClass('hover');
                                        }, function() {
                                          $(this).removeClass('hover');
                                        });
                                }
                                */
                                

                                ui.placeholder.parent().addClass("highlight");

                                showMessage(ui.placeholder.parent().parent().attr("id") + " over");
                            },

                            out: function(event, ui){
                                //var ul = ui.sender.get(0);
                                var movedItem = ui.item;

                                var siblings = movedItem.siblings("li");

                                siblings.each(function(){
                                    //jQuery(this).removeClass("hover");
                                    //jQuery('.open',this).removeClass("open");
                                    //jQuery('ul:first',this).css('visibility', 'hidden');
                                });

                                // removed highlighted target list
                                jQuery(".highlight").removeClass("highlight");
                            },

                            // mouse released and DOM structure changed
                            update: function(event, ui){
                                var movedItem = ui.item;

                                if(null != ui.sender){
                                    // item moved to other list
                                    var oldParentUl = ui.sender;

                                    // TODO check old parent, wheather it hasn't
                                    // lost all child nodes -> append samle li item
                                    if(oldParentUl.children("li").size() == 0){
                                        oldParentUl.parent().removeClass(dirItemClass);
                                        oldParentUl.append(notSortableBeginListItem);
                                    }

                                    // TODO check new parent, wheather this is
                                    // not the first real node as his child
                                    movedItem.siblings("li." + ignoredItemsClass)
                                        .remove();
                                    movedItem.parent().parent()
                                        .addClass(dirItemClass);
                                }
                                
                                
                                
                                var newParentItem = movedItem.parent().parent();
                                var newParentItemId = null;


                                if(newParentItem.get(0).tagName == "LI"){
                                    newParentItemId = newParentItem.attr("id");
                                } else {
                                    // top level
                                    newParentItemId = null;
                                }

                                var position = movedItem
                                    .parent()
                                    .children().index(movedItem);

                                sendMenuStructureUpdate(movedItem.attr("id"),
                                    newParentItemId, position);
                            }
                        });
                });

                // connect every sortable list with each other
                /*
                var connCoutn = 0;
                jQuery("#menu ul").each(function(){
                    jQuery(this)
                        .sortable('option', 'connectWith', '#menu ul');

                        connCoutn++;
                        debug("connected " + connCoutn);
                });
                */
            });

            function sendMenuStructureUpdate(itemId, newParentId, newPosition){
                var url = "${contextPath}/ajaxReceive.action";

                jQuery.post(
                    url,
                    {
                        itemId: itemId,
                        newParentId: newParentId,
                        newPosition: newPosition
                    },
                    function (data, textStatus) {
                        // data could be xmlDoc, jsonObj, html, text, etc...
                        //this; // the options for this ajax request

                        showMessage(data);

                    },
                    "text");
            }

            function debug(text){
                jQuery("#debug")
                    .prepend(new Date() + ": " + text + "<br/>");
            }

            function showMessage(text){
                var messages = jQuery("#messages")
                    .append("<div>" + text + "</div>");
                    

                messages.children("div:last").fadeOut(3000);
            }

        </script>

    </head>
    <body>

        <div id="menu">
            <ul id="menu_1" class="horizontal">
                <li id="menu_1_1" class="dir"><a>Prvni uroven a</a>
                    <ul>
                        <li id="menu_1_1_1"><a>Druha uroven a</a></li>
                        <li id="menu_1_1_2"><a>Druha uroven b</a></li>
                        <li id="menu_1_1_3" class="dir"><a>Druha uroven c</a>
                            <ul>
                                <li id="menu_1_1_3_1" class="dir">
                                    <a>Treti uroven a</a>
                                    <ul>
                                        <li id="menu_1_1_3_1_1"><a>Ctvrta uroven a</a></li>
                                        <li id="menu_1_1_3_1_2"><a>Ctvrta uroven b</a></li>
                                        <li id="menu_1_1_3_1_3" class="dir">
                                            <a>Ctvrta uroven c</a>
                                            <ul>
                                                <li id="menu_1_1_3_1_3_1"><a>Pata uroven a</a></li>
                                                <li id="menu_1_1_3_1_3_2"><a>Pata uroven b</a></li>
                                                <li id="menu_1_1_3_1_3_3"><a>Pata uroven c</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="menu_1_1_3_2"><a>Treti uroven b</a></li>
                                <li id="menu_1_1_3_3"><a>Treti uroven c</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li id="menu_1_5"><a>Prvni uroven b</a></li>
                <li id="menu_1_7" class="dir">
                    <a>Prvni uroven c</a>
                    <ul>
                        <li id="menu_1_7_1"><a>Druha uroven a</a></li>
                        <li id="menu_1_7_2"><a>Druha uroven b</a></li>
                        <li id="menu_1_7_3" class="dir"><a>Druha uroven c</a>
                            <ul>
                                <li id="menu_1_7_3_1" class="dir">
                                    <a>Treti uroven a</a>
                                    <ul>
                                        <li id="menu_1_7_3_1_1"><a>Ctvrta uroven a</a></li>
                                        <li id="menu_1_7_3_1_2"><a>Ctvrta uroven b</a></li>
                                        <li id="menu_1_7_3_1_3" class="dir">
                                            <a>Ctvrta uroven c</a>
                                            <ul>
                                                <li id="menu_1_7_3_1_3_1"><a>Pata uroven a</a></li>
                                                <li id="menu_1_7_3_1_3_2"><a>Pata uroven b</a></li>
                                                <li id="menu_1_7_3_1_3_3"><a>Pata uroven c</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="menu_1_7_3_2"><a>Treti uroven b</a></li>
                                <li id="menu_1_7_3_3"><a>Treti uroven c</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li id="menu_1_9"><a>Prvni uroven d</a></li>
                <li id="menu_1_11" class="dir"><a>menu_1_11</a>
                    <ul>
                        <li id="menu_1_11_1"><a>menu_1_11_1</a></li>
                        <li id="menu_1_11_2"><a>menu_1_11_2</a></li>
                        <li id="menu_1_11_3" class="dir"><a>menu_1_11_3</a>
                            <ul>
                                <li id="menu_1_11_3_1" class="dir">
                                    <a>menu_1_11_3_1</a>
                                    <ul>
                                        <li id="menu_1_11_3_1_1"><a>menu_1_11_3_1_1</a></li>
                                        <li id="menu_1_11_3_1_2"><a>menu_1_11_3_1_2</a></li>
                                        <li id="menu_1_11_3_1_3" class="dir">
                                            <a>menu_1_11_3_1_3</a>
                                            <ul>
                                                <li id="menu_1_11_3_1_3_1"><a>menu_1_11_3_1_3_1</a></li>
                                                <li id="menu_1_11_3_1_3_2"><a>menu_1_11_3_1_3_2</a></li>
                                                <li id="menu_1_11_3_1_3_3"><a>menu_1_11_3_1_3_3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li id="menu_1_11_3_2"><a>menu_1_11_3_2</a></li>
                                <li id="menu_1_11_3_1"><a>menu_1_11_3_1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>


        <div id="messages" title="Messages" />
        <div id="debug" title="Debug" />
    </body>
</html>
